<template>
    <RecycleScroller class="scroller" :items="list" :item-size="32" key-field="id" v-slot="{ item }">
        <div class="user">
            {{ item.name }}
        </div>
    </RecycleScroller>

</template>

<script setup lang="ts">

const list = shallowRef(new Array(1000).fill(0).map((item, index) => ({ id: index, name: `User ${index}` })))

</script>

<style scoped>
.tab3 {
    height: 100%;
    /* overflow: auto; */
}

.scroller {
    height: 100%;
    background-color: #bfa;
    overflow: auto;
}

.user {
    height: 32%;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
</style>